---
import prefabs from 'prefabs/index.js';

import Image from 'components/Image.astro';

const { contentItem } = Astro.props;
const { title, description, url, cover, tags, extraContext } = contentItem;
---

<li class={prefabs.previewCard}>
  <Image
    class='br-md'
    src={cover}
    alt=''
    height='144'
    width='144'
    loading='lazy'
  />
  <div class='flex flex-col gap-1 md:gap-2'>
    <h3 class={prefabs.secondaryCardTitle}>
      <a class='lnk-inherit lnk-fill-parent' href={url}>{title}</a>
    </h3>
    <p
      class='mx-0 mt-1 mb-3 f-clamp fs-sm md:fs-md'
      set:html={`${description}`}
    />
    <p class={prefabs.cardSubtitle}>
      {tags} &middot; <span class='inline-block'>{extraContext}</span>
    </p>
  </div>
</li>
